<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏页面</title>
  <link rel="stylesheet" href="css/navbar.css">
</head>
<body>
<nav>
  <ul>
    <li><a href="#" onclick="loadPage('chatroom.jsp')">聊天室</a></li>
    <li><a href="#" onclick="loadPage('shop_page.html')">购物车</a></li>
    <li><a href="#" onclick="loadPage('profile.jsp')">个人中心</a></li>
    <li><a href="logout">退出登录</a> </li>
  </ul>
</nav>
<iframe id="contentFrame" src="chatroom.jsp" width="100%" height="600px" frameborder="0"></iframe>

<script>
  function loadPage(page) {
    document.getElementById('contentFrame').src = page;
  }
</script>
</body>
</html>